//引入重置样式
require('../../assets/css/reset.css')

//引入公共样式
require('../../assets/css/property.css')

//引入页面样式
require('./userInformation.less')


//复用的basic
require('../../assets/css/basic.less')

//获取axios工具函数
const request = require('../../../utils/request')

//引入fonts字体图标
require('../../assets/fonts/iconfont.css')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'


//等待dom加载完毕之后操作dom
window.onload = () => {
    const btn = document.querySelector('#btn')
    const handler = () => {
      console.log('666 :>> ', 666)
    }
    btn.addEventListener('click', handler)
    btn.removeEventListener('click', handler)
    btn.addEventListener('click', () => {
      console.log('777 :>> ', 777)
    })
  
    //获取dom
    const upload = document.querySelector('#upload')
    const nickName = document.querySelector('#nickName')
    const showCityPicker = document.querySelector('#showCityPicker')
    const avatar = document.querySelector('#avatar')
    const selCity = document.querySelector('#selCity')
    let cityId = ''
    let provinceId1 = ''
    const showSexPicker = document.querySelector('#showSexPicker')
    const selSex = document.querySelector('#selSex')
    const showDatePicker = document.querySelector('#showDatePicker')
    const showProvincePicker = document.querySelector('#showProvincePicker')
    const text = document.querySelector('#text')
    const textLength = document.querySelector('#textLength')
    const pupup = document.querySelector('.weui-half-screen-dialog')
    const submit = document.querySelector('#submit')
  
    //获取用户信息
    function getUserInfo() {
      request.get('/api/user/info').then(res => {
        //1 解构数据
        let {errno, data} = res.data
        //2 判断
        if (errno === 0) {
          //3 处理业务逻辑
          render(data)
        }
      })
    }
  
    //初始化数据回显
    function render(data) {
      //图片渲染 服务器地址+相对路径+文件名
      avatar.src = API + data.imgUrl
      nickName.value = data.nickName
      selSex.textContent = data.gender ?? '请选择性别' //空值合并
      selBirthday.textContent = data.birthday ?? '请选择生日' //空值合并
      text.value = data.sign
    }
  
    //初始化获取用户信息
    getUserInfo()
  
    //监听file 输入框的change事件
    upload.addEventListener('change', e => {
      console.log('e :>> ', e.target.files[0])
      //创建FormData 对象 添加文件
      const formData = new FormData()
      formData.append('file', e.target.files[0])
      //发送ajax请求
      request.post('/api/circles/uploadImg', formData).then(res => {
        console.log('res.data :>> ', res.data)
        //回显头像
        //解构数据
        let {errno, data} = res.data
        //判断
        if (errno === 0) {
          avatar.src = API + data.url
        }
      })
    })
  
    //获取dom给头像绑定点击事件
  
    avatar.addEventListener('click', () => {
      //让上传按钮 触发点击事件
      upload.click()
    })
  
    //性别
    showSexPicker.addEventListener('click', () => {
      weui.picker(
        [
          {
            label: '男',
            value: 0,
          },
          {
            label: '女',
            value: 1,
          },
        ],
        {
          //确定才选中
          onConfirm: function (result) {
            selSex.textContent = result[0].label
          },
          title: '性别选择',
        }
      )
    })
  
    //生日选择器
    let selBirthday = document.querySelector('#selBirthday')
    //监听下拉点击
    showDatePicker.addEventListener('click', () => {
      weui.datePicker({
        start: 1990,
        end: new Date().getFullYear(),
        onConfirm: function (result) {
          console.log(result)
          selBirthday.textContent = result.map(v => String(v.value).padStart(2, '0')).join('-')
        },
        title: '选择生日',
      })
    })
  
    //省份选择
    let provinces = [] //储存省份
    //获取所有省份
    function getProvinces() {
      request.get('/api/shared/province').then(res => {
        //解构数据
        let {errno, data} = res.data
        //判断
        if (errno === 0) {
          //处理数据
          provinces = data.map(v => {
            return {
              label: v.name,
              value: v.id,
            }
          })
        }
      })
    }
    getProvinces()
  
    //省份选择器
    const selProvince = document.querySelector('#selProvince')
    showProvincePicker.addEventListener('click', () => {
      weui.picker(provinces, {
        //确定才选中
        onConfirm: function (result) {
          //数据回显
          selProvince.textContent = result[0].label
          provinceId1 = result[0].value
          //获取城市信息
          getCity(result[0].value)
        },
        title: '省份选择',
      })
    })
  
    //获取城市
    let pickerOldHandler = null //用于储存上一次的 弹窗函数
    function getCity(provinceId) {
      request
        .get('/api/shared/city', {
          params: {
            provinceId,
          },
        })
        .then(res => {
          //解构数据
          let {errno, data} = res.data
          //判断
          if (errno === 0) {
            //处理数据
            let citys = data.map(v => ({label: v.name, value: v.id}))
  
            //设置一个容器存储函数体
            function handler() {
              weui.picker(citys, {
                //确定才选中
                onConfirm: function (result) {
                  //数据回显
                  selCity.textContent = result[0].label
                  cityId = result[0].value
                },
                title: '城市选择',
              })
            }
  
            //清除上一次的点击事件
            showCityPicker.removeEventListener('click', pickerOldHandler)
            //把这一次的弹窗函数 赋值给外层变量.使得pickerOldHandler进入闭包存储起来
            pickerOldHandler = handler
  
            //获取数据之后 再绑定选择器 渲染内容
            showCityPicker.addEventListener('click', handler)
          }
        })
    }
  
    //文本域监听
    text.addEventListener('input', () => {
      //span的内容 = 输入字的长度
      textLength.textContent = text.value.length
    })
  
    //提交表单
    submit.addEventListener('click', () => {
      request
        .post('/api/user/changeInfo', {
          nickName: nickName.value,
          gender: selSex.textContent,
          provinceId: provinceId1,
          cityId: cityId,
          birthday: selBirthday.textContent,
          imgUrl: avatar.src.replace(API, ''),
          sign: text.value,
        })
        .then(res => {
          console.log('res.data :>> ', res.data)
          //解构数据
          let {errno, data} = res.data
          //判断
          if (errno === 0) {
            //更新token
            localStorage.setItem('token', 'Bearer ' + data.token)
          }
        })
    })
  }
  